<template>
  <app-home>
    <div slot="main">
      <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <Form-item label="产品名称" prop="name">
          <i-input :value.sync="formValidate.name" placeholder="请输入产品名称"></i-input>
        </Form-item>
        <Form-item label="产品类型" prop="pro_type">
          <!-- <i-select :model="formValidate.pro_type" placeholder="请选择产品类型">
            <i-option value="beijing">北京市</i-option>
            <i-option value="shanghai">上海市</i-option>
            <i-option value="shenzhen">深圳市</i-option>
          </i-select> -->
        </Form-item>
        <Form-item label="产品描述" prop="describe">
          <app-quill :value.sync="formValidate.describe"></app-quill>
        </Form-item>
        <Form-item label="关键词" prop="keywords">
          <i-input :value.sync="formValidate.buy_num" placeholder="关键词"></i-input>
        </Form-item>
        <Form-item label="购买数量" prop="buy_num">
          <i-input :value.sync="formValidate.buy_num" placeholder="请输入购买数量"></i-input>
        </Form-item>
          <Form-item label="Switch">
            <i-switch v-model="formValidate.hot" size="large">
                <span slot="open">火爆</span>
                <span slot="close">一般</span>
            </i-switch>
        </Form-item>
          <Form-item label="上架日期" >
            <Row>
              <i-col span="11">
                <Form-item prop="pro_data">
                  <Date-picker type="date" placeholder="选择日期" :value.sync="formValidate.pro_data"></Date-picker>
                </Form-item>
              </i-col>
            </Row>
          </Form-item>
        
        <Form-item label="地址" prop="source">
          <i-input :value.sync="formValidate.source" placeholder="请输入地址"></i-input>
        </Form-item>
        <Form-item label="价格" prop="price">
          <i-input :value.sync="formValidate.price" placeholder="请输入价格"></i-input>
        </Form-item>
        <Form-item>
          <i-button type="primary" @click="handleSubmit(formValidate)">提交</i-button>
          <i-button  @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
        </Form-item>
      </i-form>
    </div>
  </app-home>
</template>
<script>
import Home from "@/views/home";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    "app-home": Home,
    "app-quill":quillEditor
  },
  data() {
    return {
      formValidate: {
        name: "aaa",
        pro_type: "5d0de98ce56a05170869a1d9",
        decribe:"ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",
        keywords:["好吃","好看"],
        parameter:{
          material: "Clark",
          people: "老少皆宜"
        },
        buy_num: "12",
        hot: true,
        pro_data: "",
        source: "杭州",
        price: "99"
      },
      ruleValidate: {
        name: [{ required: true, message: "产品名称不能为空", trigger: "blur" }],
        buy_num: [{ required: true, message: "请输入购买数量", trigger: "blur" }],
        hot: [{ required: true, message: "请选择火爆程度", trigger: "change" }],
        pro_type:[{ required: true, message: "请选择产品类型", trigger: "change" }],
        pro_data: [
          {
            required: true,
            type: "date",
            message: "请选择日期",
            trigger: "blur"
          }
        ],
        source:[{required:true,message:"请输入地址",trigger:"blur"}],
        price:[{required:true,message:"请输入价格",trigger:"blur"}]
      }
    }
  },
  methods: {
    handleSubmit(val) {
      console.log(val);
      this.$store.dispatch("productCreate",val).then(res=>{
        console.log(res)
      })
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>
